<template>
  <div class="container" ref="mainCon">
    <!-- <div class="searchBox"> -->
    <el-row class="btnGroup">
      <el-button plain type="info" @click="toCheckCategory">考核类别</el-button>
      <el-button plain type="info" @click="toCheckProject">考核项目</el-button>
      <el-button plain class="saveBtn" @click="toItemLibrary"
        >考核事项</el-button
      >
    </el-row>
    <el-row>
      <el-col class="topTitle">
        事项库
        <el-button
          class="commonBut saveBtn funComBut fr"
          v-show="isShowAdd"
          icon="icon iconfont icontianjia"
          @click="addDialogFormVisible = true"
          style="margin-top: 15px; margin-right: 15px"
        >
          <span class="opetareText">新增事项</span>
        </el-button>
      </el-col>
    </el-row>
    <!-- </div> -->

    <div class="mainCon">
      <el-row class="toolbar" style="padding: 0 24px">
        <el-form :inline="true">
          <el-form-item label="考核类别" class="row-padding-bottom">
            <el-select placeholder="请输入" v-model="category" clearable>
              <el-option label="" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考核项目" class="row-padding-bottom">
            <el-select placeholder="请输入" v-model="project" clearable>
              <el-option label="" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#333' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          :cell-style="{ color: '#333' }"
        >
          <el-table-column
            prop="typeName"
            label="类别"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="accidentName"
            label="考核项目"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="accidentName"
            label="考核事项"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="accidentDate"
            label="标准说明"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="accidentDate"
            label="标准说明"
            align="参考分值"
          ></el-table-column>
          <el-table-column label="操作" align="left" :formatter="formatTd">
            <template slot-scope="scope">
              <el-link type="primary" @click="addDialogFormVisible = true"
                >修改</el-link
              >
              <el-link type="primary" @click="toDelete(scope.$index, scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>

    <el-dialog
      title="新增事项"
      :visible.sync="addDialogFormVisible"
      width="40%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="150px"
        class="demo-formData"
      >
        <el-row>
          <el-form-item
            prop="category"
            label="考核类别"
            class="row-padding-bottom"
          >
            <el-select
              v-model="formData.category"
              class="selectWidth"
              clearable
            >
              <el-option label="" value="地区自评+上级地区自评"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="project"
            label="考核项目"
            class="row-padding-bottom"
          >
            <el-select v-model="formData.project" class="selectWidth" clearable>
              <el-option label="" value="地区自评+上级地区自评"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="checkItem"
            label="考核事项"
            class="row-padding-bottom"
          >
            <el-input
              type="text"
              v-model="formData.checkItem"
              placeholder="请输入事项名称"
              class="selectWidth"
              clearable
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="standardItem"
            label="标准说明"
            class="row-padding-bottom"
          >
            <el-input
              type="textarea"
              v-model="formData.standardItem"
              placeholder="请输入"
              class="selectWidth"
              clearable
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="score"
            label="参考分值"
            class="row-padding-bottom"
          >
            <el-input
              type="text"
              v-model="formData.score"
              placeholder="请输入"
              :style="{ width: '92%' }"
              clearable
            ></el-input
            >&nbsp;分
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="btnGroup">
        <el-button @click="goback">取 消</el-button>
        <el-button type="primary" class="saveBtn" @click.native="saveForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="删除事项"
      :visible.sync="deleteDialog"
      width="30%"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <span>确定删除事项吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialog = false">取 消</el-button>
        <el-button type="primary" @click="deleteDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'itemLibrary',
  mixins: [scrollTable],
  data() {
    return {
      category: '',
      project: '',
      addDialogFormVisible: false,
      deleteDialog: false,
      formData: {
        category: '',
        project: '',
        checkItem: '',
        standardItem: '',
        score: '',
      },
      //表格数据
      tableList: [],
      requestUrl: 'api-r/rightsaccident/expand/list',
      isShow: false, //列表加载
      // loading: true,
      loading: false,
      formRules: {
        category: [
          { required: true, message: '考核类别不能为空', trigger: 'change' },
        ],
        project: [
          { required: true, message: '考核项目不能为空', trigger: 'change' },
        ],
        checkItem: [
          { required: true, message: '考核事项不能为空', trigger: 'change' },
        ],
        standardItem: [
          { required: true, message: '标准说明不能为空', trigger: 'change' },
        ],
        score: [
          { required: true, message: '标准分值不能为空', trigger: 'change' },
        ],
        isShowAdd: '',
      },
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:add') > -1
  },
  methods: {
    // 按钮跳转
    toCheckCategory() {
      this.$router.push({ name: 'checkCategory' })
    },
    toItemLibrary() {
      this.$router.push({ name: 'itemLibrary' })
    },
    toCheckProject() {
      this.$router.push({ name: 'checkProject' })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },

    saveForm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.addDialogFormVisible = false
        } else {
          return false
        }
      })
    },
    goback() {
      this.$refs['formData'].resetFields()
      this.addDialogFormVisible = false
    },

    toDelete() {
      this.deleteDialog = true
    },
  },
}
</script>

<style scoped lang="less">
.container {
  padding: 24px;
}
.btnGroup {
  margin-bottom: 24px;
}
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
  .saveBtn {
    margin-right: 24px;
    margin-top: 15.5px;
  }
}

.mainCon {
  top: 260px;
}
.selectWidth {
  width: 100%;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
</style>
